<template>
  <div>
    <!-- 视频动画 -->
    <div class="Video_animation">
      <video
        src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4"
        autoplay="autoplay"
        loop="loop"
        muted="muted"
        style="width: 100%; height: 100%; object-fit: fill"
      />
    </div>
    <!-- form模块 -->
    <div class="Login-validation">
      <!-- 头部图片 -->
      <div class="imglog">
        <img
          src="	https://slwl-admin.itheima.net/static/img/logo1.33ef7fa0.png"
        />
      </div>
      <!-- form表单 -->
      <div>
        <el-form
          label-width="30px"
          size="medium"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="textAccount">
            <div class="Accountnumber">
              <img
                src=""
              />
            </div>
            <el-col :span="22">
              <el-input
                label-width:auto
                type="text"
                v-model="ruleForm.textAccount"
                autocomplete="off"
            /></el-col>
          </el-form-item>
          <el-form-item prop="password">
            <el-col :span="22"
              ><div class="passnumber">
                <img
                  src=""
                  alt=""
                />
              </div>
              <el-input
                label-width:auto
                type="password"
                v-model="ruleForm.password"
                autocomplete="off"
            /></el-col>
          </el-form-item>
          <el-form-item prop="code">
            <div class="yanzhengma">
              <img
                src=""
                alt=""
              />
            </div>
            <el-col :span="22">
              <el-input
                label-width:auto
                type="text"
                v-model="ruleForm.code"
                autocomplete="off"
                ><template #suffix>
                  <img :src="url" @click="fication" /> </template></el-input
            ></el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import { Verificationcodeapi } from '@/api/user'
export default {
  data() {
    return {
      ruleForm: {
        textAccount: 'shenlingadmin',
        password: '123456',
        code: '' // 验证码结果
      },
      rules: {
        textAccount: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 16,
            message: '请正确输入账号',
            // eslint-disable-next-line spaced-comment
            trigger: ['blur', 'change'] //规则触发的时机
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 16,
            message: '长度在 6 到 16个字符',
            trigger: ['blur', 'change']
          }
        ],
        Verification: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 3,
            message: '请正确输入验证码',
            // eslint-disable-next-line spaced-comment
            trigger: ['blur', 'change'] //规则触发的时机
          }
        ]
      },
      obj: { key: new Date() },
      url: ''
    }
  },
  //
  created() {
    this.Verification()
  },
  methods: {
    ...mapActions('user', ['getlogin']),
    // 验证码获取
    async Verification() {
      const res = await Verificationcodeapi(this.obj)
      console.log(res)
      const blob = new Blob([res.data]) // 转化数据类型
      this.url = window.URL.createObjectURL(blob) //
    },
    // 点击刷新验证码
    fication() {
      this.Verification()
    },
    // 点击登录
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const obj = {
            account: this.ruleForm.textAccount,
            code: this.ruleForm.code,
            key: this.obj.key,
            password: this.ruleForm.password
          }
          console.log(obj)
          // eslint-disable-next-line no-undef
          this.getlogin(obj)
            .then((res) => {
              this.$router.push('/')
            })
            .catch((error) => {
              console.log(error)
            })
        }
      })
    }
    // resetForm(formName) {
    //   this.$refs[formName].resetFields()
    // }
  }
}
</script>
<style scoped lang="scss">
.Login-validation {
  height: 450px;
  width: 400px;
  background-color: #ffffff;
  position: fixed;
  left: 550px;
  top: 150px;
  border-radius: 20px;
  .imglog {
    width: 200px;
    height: 50px;
    margin: 30px auto;

    img {
      width: 100%;
    }
  }
}
.Video_animation {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.demo-ruleForm {
  ::v-deep {
    .el-form-item__content {
      .el-input__inner {
        height: 50px;
        padding: 0px 15px 0px 40px;
      }
      .Accountnumber {
        z-index: 1;
        width: 22px;
        height: 22px;
        position: fixed;
        left: 590px;
        top: 274px;
        img {
          width: 100%;
        }
      }
      .passnumber {
        z-index: 1;
        position: fixed;
        left: 590px;
        top: 344px;
        width: 22px;
        height: 22px;
        img {
          width: 100%;
        }
      }
      .yanzhengma {
        z-index: 1;
        position: fixed;
        left: 590px;
        top: 417px;
        width: 22px;
        height: 22px;
        img {
          width: 100%;
        }
      }
    }
    .el-button {
      margin-top: 30px;
      width: 340px;
      height: 50px;
      background-color: #e15535;
      border: 0;
    }
  }
}
</style>
